import Header from "@shared/header";
import GeekIcon from "@shared/geekIcon";
import dayjs from "dayjs";
import styles from "@styles/article.module.less";
import classNames from "classnames";
import React, { useCallback, useState } from "react";
import { SlideRef } from "@shared/slide";
import ReplyItem from "@pages/article/widgets/replyItem";
import ReplyComment from "@pages/article/widgets/replyComment";
import Collect from "@pages/article/widgets/collect";
import { useLazyRequestCommentsQuery } from "@service/comments";
import { useTypedDispatch, useTypedSelector } from "@store/index";
import { clearReply, replySelectors, saveReply } from "@slice/reply";
import Infinite from "@shared/infinite";

interface Props {
  // 当前要回复的评论对象
  comment: ArticleComment;
  // 控制弹框渲染和销毁的对象
  slideRef: React.RefObject<SlideRef | null>;
}

export default function ReplyList({ comment, slideRef }: Props) {
  // 用于获取评论回复列表的方法
  const [requestComments] = useLazyRequestCommentsQuery();
  // 评论回复列表数据的偏移量
  const [offset, setOffset] = useState<string | undefined>(undefined);
  // 是否还有更多数据可以加载
  const [hasMore, setHasMore] = useState(true);
  // 获取 dispatch
  const dispatch = useTypedDispatch();
  // 获取本地评论回复列表
  const replies = useTypedSelector(replySelectors.selectAll);
  // 用于加载更多数据的方法
  const loadMore = () => {
    return requestComments({
      type: "c",
      source: comment.com_id,
      offset,
      limit: 10,
    })
      .unwrap()
      .then((response) => {
        // 评论回复列表获取成功
        // 保存评论回复列表
        dispatch(saveReply(response.data.results));
        // 是否还有更多数据可以加载
        setHasMore(response.data.last_id !== response.data.end_id);
        // 更新获取数据的偏移量
        setOffset(response.data.last_id);
      });
  };

  // 重置评论回复列表
  const resetReplyComments = useCallback(() => {
    dispatch(clearReply());
    setOffset(undefined);
    setHasMore(true);
  }, [dispatch]);

  return (
    <>
      <Header
        title={`4条回复`}
        left={
          <GeekIcon
            type={"iconfanhui"}
            style={{ width: "4.5333vw", height: "4.5333vw" }}
            onClick={() => {
              // 关闭弹层
              slideRef.current?.close();
            }}
          />
        }
      />
      <div className={classNames(styles.article, styles.replyList)}>
        <div className={styles.comment}>
          <div className={styles.item}>
            <div className={styles.commentator}>
              <div className={styles.avatar}>
                <img src={comment.aut_photo} alt="" />
                <span>{comment.aut_name}</span>
              </div>
              <button className={styles.attention}>关注</button>
            </div>
            <div className={styles.discuss}>{comment.content}</div>
            <div className={styles.bottom}>
              <div className={styles.reply}>
                <span>{dayjs().to(dayjs(comment.pubdate))}</span>
              </div>
              <div className={styles.like}>
                <span>{comment.like_count}</span>
                <GeekIcon type={"iconbtn_like"} />
              </div>
            </div>
          </div>
          <h4 className={styles.title}>全部回复 (10)</h4>
          {replies.map((reply) => (
            <ReplyItem key={reply.com_id} reply={reply} />
          ))}
          <Infinite hasMore={hasMore} loadMore={loadMore} />
        </div>
      </div>
      <div className={styles.bar}>
        <ReplyComment
          id={comment.com_id}
          name={comment.aut_name}
          resetReplyComment={resetReplyComments}
        />
        <div className={styles.icons}>
          <Collect isCollect={false} id={""} />
          <div className={styles.item}>
            <GeekIcon type={"iconbtn_share"} />
            <span>分享</span>
          </div>
        </div>
      </div>
    </>
  );
}
